<template>
  <div class="detail">
    <MHeader :base="true"> 详情页面</MHeader>
    <loading v-if="loading"></loading>
    <template v-else>
      <section class="body">
        <header>
          <Swiper :swiperSlides="book.bookCover"></Swiper>
        </header>
        <section class="bodypart">
          <div class="bodyparl">
            <h2>{{book.bookName}}</h2>
            <p>{{book.bookInfo}}</p>
            <span>￥{{book.bookPrice}}</span>
          </div>
          <div class="bodyparr">
            <i class="iconfont icon-shoucang"></i>
            <ul>
              <li v-for="val in Stars">
                <img src="../img/未标题-1.png">
                <img src="../img/未标题-2.png" :style="styleStars(val)">
              </li>
              {{book.bookScore}}
            </ul>
          </div>
        </section>
        <div class="live">
          <p>猜你喜欢：</p>
          <div class="swiper">
            <live :swiperSlides="live" :W="W"></live>
          </div>
        </div>
      </section>
    </template>
  </div>
</template>
<script>
  import MHeader from '../base/MHeader';
  import {getAllD} from '../api';
  import Swiper from '../base/Swiper.vue';
  import live from '../base/live.vue';
  import loading from '../base/loading.vue';
  export default {
    data() {
      return {
        book:[],
        live:[],
        loading:true,
      }
    },
    created() {
      this.add(this.$route.params.bid);//id获取书信息;
    },
    methods: {
      async add(id){
        let [book,live]= await getAllD(id);
        book.bookCover = book.bookCover.split(';');
        this.live = live;
        this.loading = false;
        this.book = book;
      },
      numArr(num,arr=[]){
        if(num===0){
          return arr;
        }
        if(num>=1){
          arr.push(1);
          return this.numArr(--num,arr);
        }else{
          arr.push(num);
          return arr;
        }
      },
      fnStars(num){
        return num<1&&num>=0.5;
      },
      styleStars(num){
        if(num===1)return;
        let right=num*0.2;
        return `clip:rect(0 ${right}rem 0.2rem 0)`;
      }
    },
    computed: {
      Stars() {
        let arr = this.numArr(this.book.bookScore);
        while(arr.length<5){
          arr.push(0);
        }
        return arr;
      },
      W(){
        return document.documentElement.style.fontSize.slice(0,-2)*2.5;
      }
    },
    watch:{
      $route(to,from){
        this.add(this.$route.params.bid);
      }
    },
    components: {
      MHeader,
      Swiper,
      live,
      loading,
    }
  }
</script>
<style scoped lang="scss">
  .fc{
    display:flex;
    justify-content:center;
    align-items:center;
  }
.detail{
  position:relative;
  z-index:10;
  .body{
    position:relative;
    top:0.7rem;
    background: #fff;
    header{
      text-align:center;
      border-bottom:thin solid #0D3349;
      margin-bottom:0.3rem;
      img{
        height:4rem;
      }
    }
    .bodypart{
      display:flex;
      margin:0 4%;
      justify-content:space-between;
      &>*>*{
        margin-bottom:0.15rem;
      }
      .bodyparl{
        h2{
          font-size:.3rem;
          font-weight:600;
        }
        p{color:#0D3349}
        span{
          color:#DF5000;
          font-weight:600;
        }
      }
      .bodyparr{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        .icon-shoucang{font-size:42px;}
        ul{
          font-size:.26rem;
          display:flex;
          li{
            margin-right:0.01rem;
            position:relative;
            width:0.2rem;
            &:last-child{
              margin-right:0.05rem;
            }
            img{
              width:0.2rem;
              height:0.2rem;
              position:absolute;
            }
          }
        }
      }
    }
    .live{
      margin-top:15%;
      padding-bottom: 4%;
      p{
        padding:0 4% .2rem 4%;
        margin-bottom:.3rem;
        border-bottom:thin solid #00f;
      }
    }
  }
}
  .cs{color:#d58512;}
</style>
